<!--
 * @Description: 
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="dialog"
    :visible="_visible"
    :title="$t('common.detail')"
    :append-to-body="true"
    width="700px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <div class="img-box">
        <MyImg :src="formData.img_path" alt />
      </div>
      <el-form label-width="100px" class="flex-1 form">
        <el-form-item :label="$t('renlianbidui.name') + ':'">
          <span>{{ formData.name }}</span>
        </el-form-item>
        <el-form-item :label="$t('renlianbidui.gender') + ':'">
          <span>{{ formData.gender | formatGender}}</span>
        </el-form-item>
        <el-form-item :label="$t('renlianbidui.age') + ':'">
          <span>{{ formData.age }}</span>
        </el-form-item>
        <el-form-item :label="$t('renlianbidui.address') + ':'">
          <div class="d-flex ai-center">
            <span>{{ formData.address }}</span>
            <!-- <div v-if="isAddrShow" class="eye" @click="handleValidatePwd('address')" /> -->
            <ValidatePwdPopover
              v-if="isAddrShow"
              :personInfo="formData"
              @confirm="(res) => getEncryptInfo(res, 'address', 'isAddrShow')"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('renlianbidui.id') + ':'">
          <div class="d-flex ai-center">
            <span>{{ formData.id }}</span>
            <!-- <div v-if="isIdShow" class="eye" @click="handleValidatePwd('id')" /> -->
              <ValidatePwdPopover
              v-if="isIdShow"
              :personInfo="formData"
              @confirm="(res) => getEncryptInfo(res, 'id', 'isIdShow')"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('renlianbidui.lib_name') + ':'">
          <span>{{ formData.lib_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('renlianbidui.similarity') + ':'">
          <span>{{ formData.similarity }}</span>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import EnterPassword from "@/components/dialog/EnterPassword.vue";
import MyImg from "@/components/Image.vue";
export default {
  components: {
    EnterPassword,
    MyImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", JSON.parse(JSON.stringify(val)));
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  data() {
    return {
      formData: {},
      isEnterPwdShow: false,
      isAddrShow: true,
      isIdShow: true,
      toShowKey: "",
    };
  },
  methods: {
    getEncryptInfo(res, key, isShowKey) {
      if (key === "address") {
        this.$set(this.formData, key, res.data.record[0].person_addr);
      } else {
        this.$set(this.formData, key, res.data.record[0].person_idcard);
      }
      this[isShowKey] = false;
    },
    handleClose(done) {
      this._visible = false;
      done();
    },
    formatGender(gender) {
      return gender == 1 ? "男" : gender == 0 ? "女" : "";
    },
    handleValidatePwd(key) {
      this.isEnterPwdShow = true;
      this.toShowKey = key;
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }
  .eye {
    width: 20px;
    height: 10px;
    margin-left: 10px;
    background: url("../../assets/eye.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
